<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <ui:composition template="./template.xhtml">
        <ui:define name="content">
            <p:layout>
                
                <p:layoutUnit position="center">
                    <h:form>
                        <p:growl id="messages" showDetail="true" />
                        <h:panelGrid id="calendarPanel" columnClasses="value">
                            <p:schedule id="calendar" value="#{calendarBean.eventModel}" 
                                        draggable="false" resizable="false" 
                                        ignoreTimezone="false">
                                <p:ajax event="eventSelect" listener="#{calendarBean.onEventSelect}" 
                                        update="eventDetails" 
                                        oncomplete="PF('eventDialog').show();"/>
                            </p:schedule>
                        </h:panelGrid>
                        
                        <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="puff" hideEffect="puff">
                            <h:panelGrid id="eventDetails" columns="2">
                                <h:outputLabel for="name" value="Name:" />
                                <h:outputText id="name" value="#{calendarBean.event.name}"/>
                                
                                <h:outputLabel for="organizer" value="Organizer: " rendered="#{!(calendarBean.event.organizer.username.equals(userBean.loggedUser.username))}"/>
                                <h:outputText id="organizer" value="#{calendarBean.event.organizer.username}" rendered="#{!(calendarBean.event.organizer.username.equals(userBean.loggedUser.username))}"/>

                                <h:outputLabel for="from" value="From:" />
                                <h:outputLabel id="from" value="#{calendarBean.scheduleEvent.startDate}">
                                    <f:convertDateTime pattern="dd/MM/yyyy  HH:mm" timeZone="GMT+1"/>
                                </h:outputLabel>

                                <h:outputLabel for="to" value="To:" />
                                <h:outputText id="to" value="#{calendarBean.scheduleEvent.endDate}">
                                    <f:convertDateTime pattern="dd/MM/yyyy  HH:mm" timeZone="GMT+1"/>
                                </h:outputText>

                                <p:commandLink ajax="false" action="/user/eventDetails.xhtml"
                                    value="Show Details">
                                    <f:param name="idEvent" value="#{calendarBean.event.id}"/>
                                </p:commandLink>
                            </h:panelGrid>
                        </p:dialog> 
                    
                        <style type="text/css">
                            .value {
                                width: 3000px;
                            }
                        </style>
                    </h:form>
                </p:layoutUnit>
                
                <p:layoutUnit id="westPanel" position="west" size="350">
                    <p:layout>
                        <p:layoutUnit id="createEvents" position="north" size="30px">
                    <h:form>
                        <p:commandButton value="Create" action="createEvent.xhtml?faces-redirect=true"/>
                    </h:form>
                        </p:layoutUnit>
                        <p:layoutUnit id="notifications" position="center">
                            <p:layout>
                                <p:layoutUnit id="notific" position="center" header="Notifications">
                                        <h:form>
                                            <p:dataList id="notificationList" value="#{notificationBean.notificationList}" 
                                                        var="notification" type="definition" emptyMessage="No new notification">
                                                
                                                <p:panel header="#{notification.idEvent.name}" 
                                                         styleClass="#{notification.type}">
                                                    <h:panelGrid columns="3" cellpadding="5" styleClass="inMiddlePanel">
                                                    <h:outputText value="#{notificationBean.getMessage(notification)}" />
                                                    <p:button outcome="/user/eventDetails.xhtml" icon="ui-icon-clipboard"
                                                              rendered="#{notificationBean.canSeeDetails(notification)}">
                                                        <f:param name="idEvent" value="#{notification.idEvent.id}"/>
                                                    </p:button>
                                                    <p:commandButton icon="ui-icon-close" update="notificationList"
                                                                     disabled="#{not (notificationBean.canDeleteNotification(notification))}"
                                                                     action="#{notificationBean.deleteNotification(notification)}"/>
                                                    </h:panelGrid>
                                                </p:panel>

                                            </p:dataList>
                                        </h:form>
                                </p:layoutUnit>
                                <p:layoutUnit id="weatherNotific" position="south" header="Weather notifications" resizable="true" size="200" minSize="40" maxSize="300">
                                    <h:form>
                                        <p:dataList id="weatherNotificationList" value="#{weatherNotificationBean.weatherNotificationList}" 
                                                    var="wnotification" type="definition" emptyMessage="No new weather notification">
                                                
                                            <p:panel header="#{wnotification.idEvent.name}" 
                                                         styleClass="#{wnotification.type}" >
                                                <h:panelGrid columns="3" cellpadding="5" styleClass="inMiddlePanel">
                                                    <h:outputText value="#{weatherNotificationBean.getMessage(wnotification)}" />
                                                    <p:button outcome="/user/eventDetails.xhtml" icon="ui-icon-clipboard">
                                                        <f:param name="idEvent" value="#{wnotification.idEvent.id}"/>
                                                    </p:button>
                                                    <p:commandButton icon="ui-icon-close" update="weatherNotificationList"
                                                                     action="#{weatherNotificationBean.deleteWeatherNotification(wnotification)}"/>
                                                 </h:panelGrid>
                                            </p:panel>   
                                            
                                            
                                               

                                            </p:dataList>
                                        </h:form>
                                </p:layoutUnit>
                            </p:layout>
                       </p:layoutUnit>
                    </p:layout>
                </p:layoutUnit>
            </p:layout>
        </ui:define>
    </ui:composition> 
</html>